<!DOCTYPE html>
<!–suppress ThymeleafVariablesResolveInspection –>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/head::head(主页,'/css/signin/signin.css,/css/spop/spop.css,/css/mloading/jquery.mloading.css','/js/spop/spop.js,/js/mloading/jquery.mloading.js')">
</head>
<script th:inline="javascript">
    /*<![CDATA[*/

    var basePath = /*[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]*/ 'basepath';

    function userinfo() {
        var mainUrl = basePath + "/lims/user/findById?userId="+[[${user.userId}]];
        var message = "<iframe width='102%' height='100%' onscroll='true' src='" + mainUrl + "' style='border: 0px;margin-left: -15px;'></iframe>";
        $("#myFrame").html(message);
    }

    function updPassowod() {
        var mainUrl = basePath + "/lims/user/updPasswordPage?userId="+[[${user.userId}]];
        var message = "<iframe width='102%' height='100%' onscroll='true' src='" + mainUrl + "' style='border: 0px;margin-left: -15px;'></iframe>";
        $("#myFrame").html(message);
    }

    function leftMenu(permissionId){
        var leftUrl = basePath + "/lims/permission/leftMenu?permissionId="+permissionId;
        var message = "<iframe width='150%' height='100%' onscroll='true' src='" + leftUrl + "' style='border: 0px;margin-left:-15px;margin-top: 12px;z-index: 50;'></iframe>";
        $("#leftMenu").html(message);
    }

    function openMainFrame(url){
        var message = "<iframe width='102%' height='100%' onscroll='true' src='" + url + "' style='border: 0px;margin-left: -15px;'></iframe>";
        $("#myFrame").html(message);
    }

    function openModal(title,url,width,height){
        $("#modalTitle").html(title);
        var modalBody='<iframe id="modalIframe" width="106%" height="'+height+'"  src="'+url+'" style="border: 0px;margin-top: -3%;margin-left: -3%;margin-bottom:-5%;"></iframe>'
        $("#modalContent").css({'width':width});
        $("#modalBody").html(modalBody);
        $("#myModalBtn").click();
    }

    function closeModal(){
        $("#modalCloseBtn").click();
    }

    function loading(msg){
        $("body").mLoading({
            text:msg
        });
    }

    function closeLoading(){
        $("body").mLoading("hide");
    }
    
    function  xmlhttpUserInfo() {
        var xhr = new XMLHttpRequest();
        xhr.timeout = 3000;
        xhr.ontimeout = function (event) {
            alert("请求超时！");
        }
        var formData = new FormData();
        xhr.open('get', basePath+"/lims/permission/leftMenu?permissionId=2");
        xhr.send(formData);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                alert(xhr.responseText);
                $("#leftMenu").html(xhr.responseText);
            }
            else {

            }
        }
    }
    
    function reFresh() {
        window.location.reload();
    }
    /*]]>*/


</script>


<body style="height: 700px;">
    <div th:id="header">
        <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
            <!-- Brand -->
            <a class="navbar-brand" href="#" th:onclick="'javascript:reFresh()'">天道酬勤</a>

            <ul class="navbar-nav">
                <li th:each="permission:${permissionList}" class="nav-item">
                    <a th:if="${session.permissionStrList.contains(permission.permissionStr)}" th:text="${permission.permissionName}" th:onclick="'javascript:leftMenu(\''+${permission.permissionId}+'\')'" class="nav-link" href="#">Link</a>
                </li>
            </ul>

            <div class="collapse navbar-collapse justify-content-end">
                <ul class="navbar-nav">

                    <li class="nav-item dropdown ">
                        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                            <span class="glyphicon glyphicon-user"></span>&nbsp;
                            <span th:text="${user.username}"></span>
                        </a>
                        <div class="dropdown-menu" style="background-color: #724f4f">
                            <p class="dropdown-item">
                                <span th:text="'所属部门:&nbsp;&nbsp;'+${user.dept.orgName}"></span>
                            </p>
                            <p class="dropdown-item">
                                <span th:text="'最近登录:&nbsp;&nbsp;'+${#dates.format(user.lastLoginTime,'yyyy-MM-dd')}">最近登录时间</span>
                            </p>
                            <p class="dropdown-item">
                                <a href="#" th:onclick="'javascript:userinfo()'">详细信息</a>
                            </p>
                            <p class="dropdown-item">
                                <a href="#"  th:onclick="'javascript:updPassowod()'">修改密码</a>
                            </p>
                        </div>
                    </li>
                    <li class="nav-item"><a class="nav-link" href="/logout">退出 </a></li>
                </ul>
            </div>
        </nav>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div th:id="leftMenu" class="col-lg-1" style="background-color: #eeeeee;">
            </div>
            <div id="myFrame" class="col-lg-11" style="background-color: #eeeeee;height: 670px;">
            </div>
        </div>
    </div>


    <div style="display: none">
        <button th:id="myModalBtn" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
            打开模态框
        </button>
    </div>
    <!-- 模态框 -->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content" id="modalContent">

                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title" th:id="modalTitle">模态框头部</h4>

                </div>

                <!-- 模态框主体 -->
                <div class="modal-body" id="modalBody">

                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer" style="display: none;">
                    <button th:id="modalCloseBtn" type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>

            </div>
        </div>
    </div>
</body>
</html>